<template>
  <div class="article">
    <div class="wrapper-content">
      <h3>椭圆</h3>
      <div class="article-content" ref="oneRef">
        <canvas id="one"></canvas>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { fabric } from 'fabric'; // 引入 fabric

const one:any = ref(null);
const oneRef:any = ref(null);

const initOne = () => {
  one.value = new fabric.Canvas('one', {
    width: oneRef.value?.clientWidth,
    height: oneRef.value?.clientHeight
  });

  // 创建椭圆元素
  const ellipse = new fabric.Ellipse({
    top: 100,
    left: 100,
    rx: 100,
    ry: 50,
    fill: '#84fab0'
  })

  // 将元素添加到画布中
  one.value.add(ellipse);

  selectAll(one.value);
  disSelectAll(one.value);
}

// 全选
const selectAll = (canvas: any) => {
  canvas.discardActiveObject();
  var sel = new fabric.ActiveSelection(canvas.getObjects(), {
    canvas: canvas,
  });
  canvas.setActiveObject(sel);
  canvas.requestRenderAll();
}

// 取消全选
const disSelectAll = (canvas: any) => {
  canvas.discardActiveObject();
  canvas.requestRenderAll();
}

nextTick(()=>{
  initOne();
})
</script>

<style lang="scss" scoped>
.article {
  h3{
    font-size: var(--rem-15);
    padding: var(--rem-20) var(--rem-20) 0;
    font-weight: 600;
  }
  .article-content{
    min-height: var(--rem-500);
    background: #C44D58;
    background-color: #212121;
    margin: var(--rem-20);
    color: azure;
    #one{
      width: 100%;
      height: var(--rem-500);
    }
  }
}

</style>
